<template>
    <div>
        <h1>房型显示</h1>
        名称: <input type="text" v-model="t.houseTypeName">
        <input type="button" value="查询" class="btn btn-primary" @click="show">
        <input type="button" value="批量上架" class="btn btn-primary" @click="UpDoen(0)">
        <input type="button" value="批量下架" class="btn btn-primary" @click="UpDoen(1)">
        <input type="button" value="批量删除" class="btn btn-primary" @click="DelAll">
        <table class="table table-bordered">
            <tr>
                <td><input type="checkbox" v-model="checkAll" @click="QuanFan"></td>
                <td>Id</td>
                <td>房型名称</td>
                <td>房型面颊</td>
                <td>房型价格</td>
                <td>是否有窗</td>
                <td>入住人数</td>
                <td>状态</td>
                <td>图片</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in list">
                <td><input type="checkbox" :value="item.id" v-model="ids"></td>
                <td>{{ item.id }}</td>
                <td>{{ item.houseTypeName }}</td>
                <td>{{ item.houseArea }}</td>
                <td>￥{{ item.price.toFixed(2) }}</td>
                <td>{{ item.isWindows == 0 ? '否' : '是' }}</td>
                <td>{{ item.peopleCount }}</td>
                <td>{{ item.state == 0 ? '上架' : '下架' }}</td>
                <td>
                    <img :src="item.photo" alt="" style="width:100px;height:100px">
                </td>
                <td>
                    <input type="button" value="修改" @click="update(item.id)">
                </td>
            </tr>
        </table>
        总共<span>{{ data.zt }}</span>条
        每页<span>{{ t.size }}</span>条
        单前页<span>{{ t.index }}</span>/<span>{{ data.zy }}</span>页
        <input type="button" value="首页" @click="FenYe('a')">
        <input type="button" value="上一页" @click="FenYe('b')">
        <input type="button" value="下一页" @click="FenYe('c')">
        <input type="button" value="尾页" @click="FenYe('d')">
    </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';

let router = useRouter();
let route = useRoute();

let data: any = reactive({
    t: {
        "houseTypeName": "",
        index: 1,
        size: 2,
    },
    ids: [],
    list: [],
    zt: 0,
    zy: 0,
    checkAll: false,
});

let { t, ids, list, zt, zy, checkAll } = toRefs(data);
const FenYe = (type: string) => {
    switch (type) {
        case 'a':
            if (t.value.index == 1) {
                alert("已经是第一页!")
                return;
            }
            t.value.index = 1;
            break;
        case 'b':
            if (t.value.index == 1) {
                alert("已经是第一页!")
                return;
            }
            t.value.index--;
            break;
        case 'c':
            if (t.value.index == data.zy) {
                alert("已经是最后一页!")
                return;
            }
            t.value.index++;
            break;
        case 'd':
            if (t.value.index == data.zy) {
                alert("已经是最后一页!")
                return;
            }
            t.value.index = data.zy;
            break;
    }
    show();
}

const QuanFan = () => {
    checkAll.value = !checkAll.value;
    if (checkAll.value == true) {
        ids.value = list.value.map((item: any) => {
            return item.id;
        })
    } else {
        ids.value = [];
    }
}

onMounted(() => {
    show();
})

const show = () => {
    let obj = {
        "houseTypeName": t.value.houseTypeName,
        index: t.value.index,
        size: t.value.size,
    }
    axios({
        url: '/api/Test/TestList',
        method: 'get',
        params: obj
    }).then((res) => {
        list.value = res.data.data;
        zt.value = res.data.zt;
        zy.value = res.data.zy;
    })
}

const update = (id: any) => {
    router.push({ path: '/upd', query: { id: id } });
}

const UpDoen = (state: any) => {
    if (ids.value.length <= 0) {
        alert("请选择要操作的数据");
        return;
    }
    let res = confirm("确定要操作吗？");
    if (res) {
        let obj = {
            ids: ids.value.toString(),
            state: state
        }
        axios({
            url: '/api/Test/StateAll',
            method: 'put',
            params: obj
        }).then((res) => {
            if (res.data.data == 1) {
                alert(" 操作成功");
                checkAll.value = false;
                show();
            }
            else {
                alert(" 操作失败");
                return;
            }
        })
    }

}

const DelAll = () => {
    if (ids.value.length <= 0) {
        alert("请选择要操作的数据");
        return;
    }
    let res = confirm("确定要操作吗？");
    if (res) {
        let obj = {
            ids: ids.value.toString(),
        }
        axios({
            url: '/api/Test/DellAll',
            method: 'delete',
            params: obj
        }).then((res) => {
            if (res.data.data == 1) {
                alert(" 删除成功");
                checkAll.value = false;
                show();
            }
            else {
                alert(" 删除失败");
                return;
            }
        })
    }
}



</script>

<style scoped></style>